<template>
  <div class="gap-col-8">
    <p class="font-size-14 font-weight-400 line-height-120 text-center">
      {{ $t('info.beCreator.socialLink') }}
    </p>

    <InputWrap
      v-if="useIGAccount"
      v-model="socialLinks.instagramAccount.value"
      :err-msg="socialLinks.instagramAccount.error"
      label="Instagram"
      :tail-text="$t('info.switchToInputUrl')"
      :placeholder="$t('placeholder.username')"
      prepend-text="instagram.com/"
      bg-dark
      @click:tail-text="toggleIGAccount"
    ></InputWrap>
    <InputWrap
      v-else
      v-model="socialLinks.instagram.value"
      :append-icon="socialLinks.instagram.appendIcon"
      label="Instagram"
      :tail-text="$t('info.switchToUsername')"
      :placeholder="$t('placeholder.url')"
      bg-dark
      @click:tail-text="toggleIGAccount"
    ></InputWrap>
    <InputWrap
      v-if="useTwitterAccount"
      v-model="socialLinks.twitterAccount.value"
      :err-msg="socialLinks.twitterAccount.error"
      label="Twitter"
      :tail-text="$t('info.switchToInputUrl')"
      :placeholder="$t('placeholder.username')"
      prepend-text="twitter.com/"
      bg-dark
      @click:tail-text="toggleTwitterAccount"
    ></InputWrap>
    <InputWrap
      v-else
      v-model="socialLinks.twitter.value"
      :append-icon="socialLinks.twitter.appendIcon"
      label="Twitter"
      :tail-text="$t('info.switchToUsername')"
      :placeholder="$t('placeholder.url')"
      bg-dark
      @click:tail-text="toggleTwitterAccount"
    ></InputWrap>
    <InputWrap
      v-model="socialLinks.other.value"
      :append-icon="socialLinks.other.appendIcon"
      label="Other"
      :placeholder="$t('placeholder.url')"
      bg-dark
    ></InputWrap>
    <p v-if="errorMsg" class="font-size-12 font-weight-400 line-height-120 text-primary-x text-start">
      {{ $t(errorMsg) }}
    </p>
  </div>
</template>
<script setup>
import { computed, onDeactivated, reactive, ref } from 'vue'
import { parseError, useYup } from '@/plugins/yup'
import InputWrap from '@/components/form/InputWrap.vue'
import { useConfirmData } from '@/compositions/dialog/confirm-data'

const Yup = useYup()

const socialLinks = reactive({
  instagram: {
    value: '',
    appendIcon: '',
    error: '',
    check: false,
    schema: computed(() => (hasValue(socialLinks.instagram) ? Yup.string().instagram() : Yup.string())),
  },
  instagramAccount: {
    value: '',
    appendIcon: '',
    error: '',
    check: false,
    prefix: 'https://www.instagram.com/',
    schema: computed(() => (hasValue(socialLinks.instagramAccount) ? Yup.string().username() : Yup.string())),
  },
  twitter: {
    value: '',
    appendIcon: '',
    error: '',
    check: false,
    schema: computed(() => (hasValue(socialLinks.twitter) ? Yup.string().twitter() : Yup.string())),
  },
  twitterAccount: {
    value: '',
    appendIcon: '',
    error: '',
    check: false,
    prefix: 'https://x.com/',
    schema: computed(() => (hasValue(socialLinks.twitterAccount) ? Yup.string().username() : Yup.string())),
  },
  other: {
    value: '',
    appendIcon: '',
    error: '',
    check: false,
    schema: computed(() => (hasValue(socialLinks.other) ? Yup.string().url() : Yup.string())),
  },
})

const useIGAccount = ref(true)
const toggleIGAccount = () => {
  const obj = useIGAccount.value ? socialLinks.instagramAccount : socialLinks.instagram
  clear(obj)
  useIGAccount.value = !useIGAccount.value
}

const useTwitterAccount = ref(true)
const toggleTwitterAccount = () => {
  const obj = useTwitterAccount.value ? socialLinks.twitterAccount : socialLinks.twitter
  clear(obj)
  useTwitterAccount.value = !useTwitterAccount.value
}

const hasValue = (obj) => {
  return obj.value.length > 0
}

const errorMsg = ref('')
useConfirmData(() => {
  for (const obj of Object.values(socialLinks)) {
    try {
      obj.schema.validateSync(obj.value)
      obj.check = true
      obj.appendIcon = hasValue(obj) ? 'yesActive' : ''
    } catch (err) {
      console.log('error instagram', err.message)
      obj.error = parseError(err)
      obj.appendIcon = 'noActive'
      obj.check = false
    }
  }

  const instagramCheck = useIGAccount.value ? socialLinks.instagramAccount.check : socialLinks.instagram.check
  const twitterCheck = useTwitterAccount.value ? socialLinks.twitterAccount.check : socialLinks.twitter.check
  if (!instagramCheck || !twitterCheck || !socialLinks.other.check) return false

  const instagramValue = useIGAccount.value ? socialLinks.instagramAccount.value : socialLinks.instagram.value
  const twitterValue = useTwitterAccount.value ? socialLinks.twitterAccount.value : socialLinks.twitter.value
  if (!instagramValue && !twitterValue && !socialLinks.other.value) {
    errorMsg.value = 'yup.mixed.inputLeastOneSocial'
    return false
  }

  const result = {}
  Object.entries(socialLinks).forEach(([key, obj]) => {
    if (obj.value.length > 0) {
      const _key = key.replace(/.*(instagram).*/i, 'instagram').replace(/.*(twitter).*/i, 'twitter')
      const value = obj.prefix ? obj.prefix + obj.value : obj.value
      result[_key] = { value }
    }
  })

  reset()

  return result
})

onDeactivated(reset)

function reset() {
  Object.values(socialLinks).forEach(clear)
  errorMsg.value = ''
}

function clear(obj) {
  obj.value = ''
  obj.appendIcon = ''
  obj.error = ''
  obj.check = false
}
</script>
